<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../../node_modules/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="../../../node_modules/element-ui/lib/index.js"></script>
    <script src="../../../node_modules/echarts/dist/echarts.js"></script>


    <!-- 自定义 -->
    <script src="../../../node_modules/mockjs/dist/mock.js"></script>
    <script src="../static/js/mock_config.js"></script>
    <script src="../static/js/index.js"></script>
    <link rel="stylesheet" href="../../index.css">

    <link rel="stylesheet" href="../static/css/ModSchedule.css">
</head>

<body>
    <!--主体-->
    <div class="main clearfix" id="app">
        <div class="header" style="padding-top: 25px; ">
            <header>
                <div class="navbar">
                    <div class="card" style="width:30rem;background-color:#0b87fa;color: white;">
                        <ul>
                            <li>
                                <h8 style="line-height: 78px;">模具日程看板</h8>
                            </li>
                        </ul>

                    </div>
                    <div class="card" style="width:13rem;background-color: #33814e;margin-left: 2rem;">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <h4>新型</h4>
                            </li>
                            <li class="list-group-item1">
                                <h3 id="WaitPrtQty">0
                                </h3>
                            </li>
                        </ul>
                    </div>
                    <div class="card" style="width: 13rem; background: #33814e;margin-left: 2rem;">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <h4>设变</h4>
                            </li>
                            <li class="list-group-item1">
                                <h3 id="WaitPrtQty">0
                                </h3>
                            </li>
                        </ul>
                    </div>
                    <div class="card" style="width: 13rem; background: #33814e;margin-left: 2rem;margin-right: 1rem;">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <h4>修正</h4>
                            </li>
                            <li class="list-group-item1">
                                <h3 id="WaitPrtQty">0
                                </h3>
                            </li>
                        </ul>
                    </div>
                </div>
            </header>
        </div>


        <div class="main-left">
            <div class="border-container">

                <div>
                    <el-table :data="defaultDt1" :default-sort="{prop: 'ModCode', order: 'descending'}" stripe="true" ref="defaultDt1" :height=el_table_height :cell-style="{padding:20+'px'}" @row-click="dialogTableVisible = true">
                        <el-table-column prop="ModCode" align="center" label="模具">
                        </el-table-column>
                        <el-table-column prop="type" align="center" label="类型">
                        </el-table-column>
                        <el-table-column prop="Isfinish" align="center" label="已完成">
                        </el-table-column>
                        <el-table-column prop="Nofinish" align="center" label="待完成">
                        </el-table-column>
                    </el-table>
                </div>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>

            <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
                <el-table :data="gridData">
                    <el-table-column property="date" label="日期" width="150"></el-table-column>
                    <el-table-column property="name" label="姓名" width="200"></el-table-column>
                    <el-table-column property="address" label="地址"></el-table-column>
                </el-table>
            </el-dialog>

        </div>

    </div>

</body>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                el_table_height: 900,
                dialogTableVisible: false,
                dialogFormVisible: false,
                formLabelWidth: '120px',
                defaultDt1: [{
                    ModCode: 'T21001',
                    type: '新型',
                    Isfinish: '新型、设变',
                    Nofinish: '取样'
                }],
                gridData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
            }
        },
        methods: {
            GetTabelDate(that) {
                GetCodeData("", "Get", "schedule").then(function(res) {
                    console.dir(res.rows);
                    that.defaultDt1 = res.rows
                })
            },

        },

        mounted() {
            TableAotoRoll([this.$refs.defaultDt1])
            setTimeout(function() {}, 0);
            setInterval(function() {
                that.GetTabelDate(that)
            }, 1000 * 60);
        }
    })
</script>



</html>